<template>
    <div class="hege">
        <section class="hz-head">
            <div><input class="s-input" type="text" name="" id="trigger" placeholder="请选择片区" v-model="form.areaName" @focus="stopFocus1"></div>
            <div></div>
            <div><input class="s-input" type="text" ref="date1" placeholder="请选择起始日期" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus2" v-model="form.startTime" /></div>
            <div><input class="s-input" type="text" ref="date2" placeholder="请选择截止日期" data-lcalendar="2000-01-01,2029-12-31" @focus="stopFocus3" v-model="form.endTime" /></div>
        </section>
        <section>
            <div class="clearfix" style="border:1px solid #cccccc;">
                <div ref="echartContainer1" style="width:100%; height:300px;display:inline-block"></div>
            </div>
            <div class="clearfix" style="border:1px solid #cccccc;">
                <div ref="echartContainer2" style="width:100%; height:300px;display:inline-block"></div>
            </div>
        </section>
    </div>
</template>

<script>
import MobileSelect from 'mobile-select'
export default {
    data() {
        return {
            mobileSelect: '',
            calendardatetime1: '',
            calendardatetime2: '',
            name: '',
            date1: '',
            date2: '',
            arealist: [],
            form: {
                areaId: '',
                areaName: '',
                startTime: '',
                endTime: '',
            },
            chatBData: {},
            chatZData:{},
        }
    },
    watch: {
        'form.areaName'() {
            this.select(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.startTime'() {
            this.select(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        },
        'form.endTime'() {
            this.select(() => {
                this.$$tip({
                    content: '查询成功！'
                })
            })
        }
    },
    mounted() {
        this.getarealist()
        this.select(()=>{
            
        })
    },
    methods: {
        //饼图
        getchatB(callback) {
            this.$api.shuizhi.chatB(this.form).then(res => {
                if (res.success) {
                    this.chatBData = res.data
                    callback()
                }
            })
        },
        //饼图
        getchatZ(callback) {
            this.$api.shuizhi.chatZ(this.form).then(res => {
                if (res.success) {
                    this.chatZData = res.data
                    callback()
                }
            })
        },
        //片区列表
        getarealist() {
            this.$api.huizong.arealist().then(res => {
                if (res.success) {
                    this.arealist = res.data
                }
            })
        },
        //取消默认操作,加载下拉
        stopFocus1() {
            var that = this
            document.activeElement.blur();
            if (!this.mobileSelect) {
                this.mobileSelect = new MobileSelect({
                    trigger: "#trigger",
                    // title: "单项选择",
                    wheels: [
                        {
                            data: this.arealist
                        }
                    ],
                    keyMap: {
                        id: 'areaId',
                        value: 'areaName'
                    },
                    callback: function (indexArr, data) {
                        // console.log(data)
                        that.form.areaId = data[0].areaId
                        that.form.areaName = data[0].areaName
                    }
                })
            }
        },
        stopFocus2() {
            document.activeElement.blur();
            if (!this.calendardatetime1) {
                this.calendardatetime1 = new lCalendar()
                this.calendardatetime1.init({
                    'trigger': this.$refs.date1,
                    'type': 'date'
                });
            }
        },
        stopFocus3() {
            document.activeElement.blur();
            if (!this.calendardatetime2) {
                this.calendardatetime2 = new lCalendar()
                this.calendardatetime2.init({
                    'trigger': this.$refs.date2,
                    'type': 'date'
                });
            }
        },
        //获取echart数据
        select(callback) {
            let myChart1 = echarts.init(this.$refs.echartContainer1);
            let myChart2 = echarts.init(this.$refs.echartContainer2);
            this.getchatB(() => {
                myChart1.setOption({
                    title: {
                        text: '水质合格率',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '50%'],
                            data: [
                                { value: this.chatBData.hege, name: '检测合格' },
                                { value: this.chatBData.unhege, name: '检测未合格' }
                            ]
                        }
                    ]
                });

            });
            this.getchatZ(() => {
                myChart2.setOption({
                    title: {
                        // text: '某地区蒸发量和降水量',
                        // subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['合格次数', '检测次数']
                    },
                    calculable: true,
                    grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 50,
                    x2: 50,
                    y2: 56 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.chatZData.siteNames,
                            axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                return value.split("").join("\n");
                            }
                        }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '合格次数',
                            type: 'bar',
                            data: this.chatZData.hegeTotal
                        },
                        {
                            name: '检测次数',
                            type: 'bar',
                            data: this.chatZData.sumTotal
                        }
                    ]
                })
            });
            callback()
        },
    }
}
</script>

<style>
</style>
